
<@override name="title">部门管理</@override>

<@override name="body">
	<div class="layui-card">
		<div class="layui-card-body search">
			<div class="layui-row">
				<form class="layui-form">
					<div class="layui-col-md2 i-search-warp">
						<input type="text" autocomplete="off" id="searchTitle" name="search" placeholder="顶级菜单名称" class="layui-input">
						<i class="i-search layui-icon i-search-1" lay-submit lay-filter="menu-query"></i>
					</div>
				</form>
				<div class="pull-right">
					<button class="pear-btn pear-btn-primary pear-btn-md" id="add">
						<i class="layui-icon layui-icon-add-1"></i>新增
					</button>
				</div>
			</div>
		</div>
		<table id="menu-table" lay-filter="menu-table"></table>
	</div>
</@override>

<@override name="script">
	<script type="text/javascript">
		layui.use(['table','form','jquery', 'common', 'xmSelect', 'laydate', 'treetable'], function() {
			let table = layui.table;
			let form = layui.form;
			let common = layui.common;
			let $ = layui.jquery;
			let treetable = layui.treetable;

			// 全局的查询条件
			let where = {};

			window.renderTable = function(){
				// 加载层
				layer.load();
				// 表格渲染
				treetable.render({
					treeColIndex: 1,
					treeSpid: 0,
					treeIdName: 'id',
					treePidName: 'parent',
					treeDefaultClose: true,

					elem: '#menu-table',
					url: g.ctx + '/api/sys/menu/list',
					page: false,
					where: where,
					skin: 'line',
					cols: [[
						{type: 'checkbox'},
						{title: '菜单名称', field: 'name', align: 'center'},
						{title: '菜单地址', field: 'href', align: 'center'},
						{title: '权限标识', field: 'code', align: 'center'},
						{title: '是否为菜单', field: 'type', align: 'center',
							templet: function (d) {
								switch (Number(d.type)) {
									case 0:
										return '是';
									case 1:
										return '是';
									case 2:
										return '否';
									default:
										return '';
								}
							}
						},
						{title: '菜单图标', field: 'icon', align: 'center'},
						{title: '更新时间', field: 'updateTime', align: 'center'},
						{title: '操作', toolbar: LAYUI_TEMPLET.getTableHandleHtml(['edit', 'remove']), align: 'center', width: 180}
					]],
					toolbar: "",
					defaultToolbar: [],
					done: function () {
						//关闭加载
						layer.closeAll('loading');
					}
				});
			};
			renderTable();

			// 行内元素事件
			table.on('tool(menu-table)', function(obj) {
				if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				} else if (obj.event === 'show') {
					window.show(obj);
				}
			});

			// 默认查询
			form.on('submit(menu-query)', function(obj) {
				$.extend(where, obj.field);
				renderTable();
				return false;
			});

			// 增加菜单
			$("#add").on("click", function () {
				openDialog();
			});

			// 修改菜单
			window.edit = function(obj) {
				// 当前选择行数据
				let row = obj.data;
				ajax({
					url: g.ctx + '/api/sys/menu/get/' + row.id,
					type: 'get',
					success: function (resp) {
						openDialog(resp.data);
					}
				})
			};

			window.openDialog = function(data){
				let title = "编辑";
				if(data === undefined){
					title = "新增";
					data = {};
				}

				layer.open({
					type: 1,
					title: title,
					shade: 0.1,
					maxmin: true,
					area: [common.isModile()?'100%':'85%', common.isModile()?'100%':'70%'],
					btn: ['确定','取消'],
					content:  LAYUI_TEMPLET.formHtmlGen([
						{type: 'hidden', name: 'id', value: data.id},
						{type: 'text', label: '菜单名称', name: 'name', value: data.name, verify: "required"},
						{type: 'singleTreeSelect', label: '父级菜单', name: 'parent', value: data.parent, verify: "",
							url: g.ctx + '/api/sys/menu/tree'},
						{type: 'text', label: '菜单地址', name: 'href', value: data.href, verify: ""},
						{type: 'text', label: '权限标识', name: 'code', value: data.code, verify: ""},
						{type: 'defaultSelect', label: '菜单类型', name: 'type', verify: "",
							options: [
								{value: '',  text: '请选择菜单类型', },
								{value: '0', text: '父菜单', selected: data.type === 0},
								{value: '1', text: '子菜单', selected: data.type === undefined?true : data.type === 1},
								{value: '2', text: '权限菜单', selected: data.type === 2}
							]
						},
						{type: 'text', label: '菜单图标', name: 'icon', value: data.icon, verify: ""},
						{type: 'number', label: '菜单排序', name: 'sort', value: data.sort, verify: ""},
					]),
					success: function(laDom){
						// 渲染表单控件
						UTILS.formRender(laDom);
					},
					yes: function (index, laDom) {
						// 提交表单验证
						UTILS.formSubmit("#layuiForm");
					}
				});
			};

			// 提交表单
			form.on('submit(layui-form)', function(data){
				// 判断是更新还是新增
				let url = "";
				if (data.field.id){
					url = g.ctx + '/api/sys/menu/update';
				} else{
					url = g.ctx + '/api/sys/menu/add';
				}

				// 属性值封装
				let params = UTILS.processFormParams("#layuiForm");
				layer.load();
				ajax({
					url: url,
					type: 'post',
					data: params,
					success: function (resp) {
						layer.closeAll();
						layer.msg(resp.msg, {icon: 1});
						renderTable();
					}
				});
				return false;
			});

			// 删除用户
			window.remove = function(obj) {
				// 当前选择行数据
				let row = obj.data;

				layer.confirm('确定要删除该部门', {
					icon: 3,
					title: '提示'
				}, function(index) {
					layer.close(index);
					let loading = layer.load();
					ajax({
						url: g.ctx + '/api/sys/menu/delete',
						type: 'post',
						data: {id: row.id},
						success: function(resp) {
							layer.close(loading);
							layer.msg(resp.msg, {icon: 1});
							renderTable();
						}
					})
				});
			}

		})
	</script>
</@override>

<@extends name="/base/_base_list.ftl" />
